<template>
  <!-- 客户管理 -->
  <div class="client">
    <div class="box1">客户黑名单管理</div>
    <div class="box2">
      <div class="box2_top">
        <div class="top_left">
          <el-select v-model="value" placeholder="企业名称">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            v-model="input2"
            class="w-50 m-2"
            placeholder="请输入要查询的评分卡名称"
            :prefix-icon="Search"
            size="small"
          />
          <el-row class="mb-4">
            <el-button color="rgb(78, 171, 254)">查询</el-button>
            <el-button>重置</el-button>
          </el-row>
        </div>
        <div class="top_rigth">
          <el-row class="mb-4">
            <el-button text @click="pull">
              <el-button
                ><el-icon><Plus /></el-icon>导出</el-button
              ></el-button
            >
          </el-row>
          <el-row class="mb-4">
            <el-button text @click="push">
              <el-button
                ><el-icon><Plus /></el-icon>新增</el-button
              ></el-button
            >
          </el-row>
        </div>
      </div>
      <div class="box2_bottom">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="num" label="序号" width="60" />
          <el-table-column prop="name" label="企业名称" width="120" />
          <el-table-column prop="code" label="社会信用代码" />
          <el-table-column prop="money" label="注册资本" />
          <el-table-column prop="score" label="客户来源" />
          <el-table-column prop="score" label="更新时间" />
          <el-table-column label="操作">
            <div class="list">
              <el-row class="mb-4">
                <el-button text @click="push">
                  <el-button
                    ><el-icon :size="20" color="#409EFC"
                      ><Edit /></el-icon></el-button
                ></el-button>
              </el-row>
              <el-row class="mb-4">
                <el-button text @click="shanchu">
                  <el-button
                    ><el-icon :size="20" color="#409EFC"
                      ><Delete /></el-icon></el-button
                ></el-button>
              </el-row>
              <el-row class="mb-4">
                <el-button text @click="push">
                  <el-button
                    ><el-icon :size="20" color="#409EFC"
                      ><View /></el-icon></el-button
                ></el-button>
              </el-row>
            </div>
          </el-table-column>
        </el-table>
      </div>
      <div class="demo-pagination-block">
        <el-pagination
          :v-model:current-page="currentPage4"
          :v-model:page-size="pageSize4"
          :page-sizes="[5, 10, 15, 25]"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="23"
        />
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
var router = useRouter();
var input2 = ref("");
var value = ref("");

const tableData = [
  {
    num: "1",
    name: "ABC有限公司",
    code: "91110000100010433L",
    money: "100000000",
    score: "100",
    score: "100",
    score: "100",
    score: "100",
    score: "100",
    score: "100",
  },
  {
    num: "1",
    name: "ABC有限公司",
    code: "91110000100010433L",
    money: "100000000",
    score: "100",
    score: "100",
    score: "100",
    score: "100",
    score: "100",
    score: "100",
  },
  {
    num: "1",
    name: "ABC有限公司",
    code: "91110000100010433L",
    money: "100000000",
    score: "100",
    score: "100",
    score: "100",
    score: "100",
    score: "100",
    score: "100",
  },
];

const options = [
  {
    value: "企业名称",
    label: "企业名称",
  },
  {
    value: "社会信用代码",
    label: "社会信用代码",
  },
];

const pageSize4 = ref(100);
const currentPage4 = ref(4);
const background = ref(true);

var pull = () => {};
var push = () => {
  router.push("/home/client/ClientaAdd");
};
</script>
  
  <style scoped lang="scss">
.box1 {
  height: 30px;
  width: 150px;
  text-align: center;
  line-height: 30px;
  background-color: rgb(78, 171, 254);
  border-radius: 15px;
}

.box2_top {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .el-input {
    width: 250px;
  }
}
.top_left {
  display: flex;
}
.top_rigth {
  display: flex;
  justify-content: flex-end;
}
.list {
  display: flex;
  justify-content: space-around;
  .el-button {
    padding: 5px 5px;
  }
}
.demo-pagination-block {
  display: flex;
  justify-content: space-around;
}
</style>